﻿@model Web
@{
    ViewBag.Title = "StyleDesigner";
    Layout = "~/Views/Shared/_Dashboard.cshtml";
}
@UIHelper.ImageTitle(Html.Global("RES_STYLE_DESIGNER"), Html.Global("StyleDesigner_Desc"), "~/content/images/icon_ink_48.png")
@using (Html.BeginForm())
{
    Ajax.Dna().Tabs("designerTab").Views(views =>
      {
          views.Add(Html.Global("RES_UIDESIGNER")).Template(@<text>
    @{
        Ajax.Dna().Toolbar("MiscTB")
            .ShowDragHandler(true)
      .Buttons(btns =>
      {
          btns.AddImageButton(Url.Content("~/content/images/icon_refresh_16.png"), "$(\"#fPreview\")[0].contentDocument.location.reload();");

          btns.AddDropdown(Html.Global("RES_AREA")).MenuItems(ami =>
          {
              ami.Add(Html.Global("StyleDesigner_Page"), "javascript:$design('body');void(0);");
              ami.Add(Html.Global("StyleDesigner_Header"), "javascript:$design('#dna-page-header','textures');void(0);");
              ami.Add(Html.Global("StyleDesigner_Content"), "javascript:$design('#dna-page-content');void(0);");
              ami.Add(Html.Global("StyleDesigner_Footer"), "javascript:$design('#dna-page-footer','textures');void(0);");
              ami.Add(Html.Global("StyleDesigner_SiteTools"), "javascript:$design('#dna-page-toolbox');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Widget")).MenuItems(wmi =>
          {
              wmi.Add(Html.Global("RES_BOX"), "javascript:$design('.d-widget');void(0);");
              wmi.Add(Html.Global("Design_Header"), "javascript:$design('.d-widget-header','headers');void(0);");
              wmi.Add(Html.Global("Design_Body"), "javascript:$design('.d-widget-body');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_CollapsablePanel")).MenuItems(pwi =>
          {
              pwi.Add(Html.Global("RES_BOX"), "javascript:$design('.d-panel');void(0);");
              pwi.Add(Html.Global("Design_Header"), "javascript:$design('.d-panel-header','headers');void(0);");
              pwi.Add(Html.Global("Design_Header_Text"), "javascript:$design('.d-panel-header > h2','headers');void(0);");
              pwi.Add(Html.Global("Design_Body"), "javascript:$design('.d-panel-body');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Sitemap")).MenuItems(swi =>
          {
              swi.Add(Html.Global("Design_TopNode"), "javascript:$design('.d-sitemap-top-node','headers');void(0);");
              swi.Add(Html.Global("Design_TopNode_Text"), "javascript:$design('.d-sitemap-top-node>.d-sitemap-node-link>.d-sitemap-node-text','headers');void(0);");
              swi.Add(Html.Global("Design_Node"), "javascript:$design('.d-sitemap-node','headers');void(0);");
              swi.Add(Html.Global("Design_Node_Text"), "javascript:$design('.d-sitemap-node>.d-sitemap-node-link>.d-sitemap-node-text','headers');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Tree")).MenuItems(twi =>
          {
              twi.Add(Html.Global("RES_BOX"), "javascript:$design('.d-tree');void(0);");
              twi.Add(Html.Global("Design_Node_Normal"), "javascript:$design('.d-treenode > .d-treenode-content .d-treenode-text');void(0);");
              twi.Add(Html.Global("Design_Node_Hover"), "javascript:$design('.d-treenode-hover > .d-treenode-content .d-treenode-text');void(0);");
              twi.Add(Html.Global("Design_Node_Selected"), "javascript:$design('.d-treenode-selected > .d-treenode-content .d-treenode-text');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Textbox")).MenuItems(twi =>
          {
              twi.Add(Html.Global("Design_Normal"), "javascript:$design('.d-textbox');void(0);");
              twi.Add(Html.Global("Design_Hover"), "javascript:$design('.d-textbox-hover');void(0);");
              twi.Add(Html.Global("Design_Active"), "javascript:$design('.d-textbox-active');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Listbox")).MenuItems(twi =>
          {
              twi.Add(Html.Global("RES_BOX"), "javascript:$design('.d-listbox');void(0);");
              twi.Add(Html.Global("Design_Item"), "javascript:$design('.d-list-item');void(0);");
              twi.Add(Html.Global("Design_Item_Hover"), "javascript:$design('.d-list-item-hover');void(0);");
              twi.Add(Html.Global("Design_Item_Selected"), "javascript:$design('.d-list-item-selected');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Combo")).MenuItems(twi =>
          {
              twi.Add(Html.Global("Design_Normal"), "javascript:$design('.d-combo');void(0);");
              twi.Add(Html.Global("Design_Hover"), "javascript:$design('.d-combo-hover');void(0);");
              twi.Add(Html.Global("Design_Active"), "javascript:$design('.d-combo-open');void(0);");
              twi.Add(Html.Global("Design_Item_Container"), "javascript:$design('.d-combo-item-container');void(0);");
              twi.Add(Html.Global("Design_Item"), "javascript:$design('.d-combo-item');void(0);");
              twi.Add(Html.Global("Design_Item_Hover"), "javascript:$design('.d-combo-item-hover');void(0);");
              twi.Add(Html.Global("Design_Item_Selected"), "javascript:$design('.d-combo-item-selected');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Button")).MenuItems(twi =>
          {
              twi.Add(Html.Global("Design_Normal"), "javascript:$design('.d-button');void(0);");
              twi.Add(Html.Global("Design_Hover"), "javascript:$design('.d-button-hover');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Grid")).MenuItems(twi =>
          {
              twi.Add(Html.Global("RES_BOX"), "javascript:$design('.d-grid');void(0);");
              twi.Add(Html.Global("Design_Grid_Header"), "javascript:$design('.d-grid-header');void(0);");
              twi.Add(Html.Global("Design_Grid_Footer"), "javascript:$design('.d-grid-footer');void(0);");
              twi.Add(Html.Global("Design_Grid_Group"), "javascript:$design('.d-grid-groups');void(0);");
              twi.Add(Html.Global("Design_Grid_Column"), "javascript:$design('.d-grid-column');void(0);");
              twi.Add(Html.Global("Design_Grid_Row"), "javascript:$design('.d-grid-row');void(0);");
              twi.Add(Html.Global("Design_Grid_AltRow"), "javascript:$design('.d-grid-row-alt');void(0);");
              twi.Add(Html.Global("Design_Grid_Cell"), "javascript:$design('.d-grid-cell');void(0);");
          });


          btns.AddSpliter();
          btns.AddButton(Html.Global("RES_HELP"), "window.open(\"" + Url.Help(8) + "\");").ImageIcons(Url.Content("~/content/images/icon_help_16.png"));
      })
      .Render();
        Ajax.Dna().Toolbar("MenuTB")
      .ShowDragHandler(true)
      .Buttons(btns =>
      {
          btns.AddLabel(Html.Global("Design_Menus"));
          btns.AddDropdown(Html.Global("RES_COMMON")).MenuItems(cmi =>
          {
              cmi.Add(Html.Global("Design_Menu_Container"), "javascript:$design(' .d-menu-container');void(0);");
              cmi.Add(Html.Global("Design_MenuItem"), "javascript:$design('.d-menu-item');void(0);");
              cmi.Add(Html.Global("Design_MenuItem_Text"), "javascript:$design('.d-menu-item-text');void(0);");
              cmi.Add(Html.Global("Design_Skate"), "javascript:$design('.d-menu-skateitem');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Horizontal_Menu")).MenuItems(hmi =>
          {
              hmi.Add(Html.Global("RES_BOX"), "javascript:$design('.d-menu > .d-horizontal');void(0);");
              hmi.Add(Html.Global("Design_Menu_TopMenu_Item"), "javascript:$design('.d-menu > .d-horizontal > .d-menu-item');void(0);");
              hmi.Add(Html.Global("Design_Menu_TopMenu_Item_Text"), "javascript:$design('.d-menu > .d-horizontal > .d-menu-item> .d-menu-item-link > .d-menu-item-text');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_Vertical_Menu")).MenuItems(vmi =>
          {
              vmi.Add(Html.Global("RES_BOX"), "javascript:$design('.d-menu > .d-vertical');void(0);");
              vmi.Add(Html.Global("Design_Menu_TopMenu_Item"), "javascript:$design('.d-menu > .d-vertical > .d-menu-item');void(0);");
              vmi.Add(Html.Global("Design_Menu_TopMenu_Item_Text"), "javascript:$design('.d-menu > .d-vertical > .d-menu-item > .d-menu-item-link > .d-menu-item-text');void(0);");
          });

          btns.AddDropdown(Html.Global("Design_MainMenu")).MenuItems(sitemi =>
          {
              sitemi.Add(Html.Global("Design_Menu_Left"), "javascript:$design('.d-menu-left');void(0);");
              sitemi.Add(Html.Global("Design_Menu"), "javascript:$design('#SiteMenu');void(0);");
              sitemi.Add(Html.Global("Design_Menu_TopMenu_Item"), "javascript:$design('.site-menu-topitem');void(0);");
              sitemi.Add(Html.Global("Design_Menu_TopMenu_Item_Text"), "javascript:$design('.site-menu-topitem>.d-menu-item-link>.d-menu-item-text');void(0);");
              sitemi.Add(Html.Global("Design_TopMenu_Item_Hover"), "javascript:$design('.site-menu-topitem-hover');void(0);");
              sitemi.Add(Html.Global("Design_TopMenu_Item_Hover_Text"), "javascript:$design('.site-menu-topitem-hover>.d-menu-item-link>.d-menu-item-text');void(0);");
              sitemi.Add(Html.Global("Design_TopMenu_Item_Selected"), "javascript:$design('.site-menu-topitem-selected');void(0);");
              sitemi.Add(Html.Global("Design_TopMenu_Item_Selected_Text"), "javascript:$design('.site-menu-topitem-selected>.d-menu-item-link>.d-menu-item-text');void(0);");
              sitemi.Add(Html.Global("Design_Menu_Right"), "javascript:$design('.d-menu-right');void(0);");
          });
      })
      .Render();
    }
    <iframe id="fPreview" style="width:100%;height:700px;margin-top:2px;border:1px solid #cccccc;" frameborder="0" src="@Url.Action("Preview", "Theme", new { Area = "", website = WebSiteContext.Current.Web.Name })">
    </iframe>
    </text>);
          views.Add(Html.Global("RES_CSS_STYLESHEET")).Template(() =>
          {
              Ajax.Dna().RichTextBox("Web.CssText")
                    .Options(opts =>
                    {
                        opts.Mode = "source";
                    })
                    .ToolPanes(panes =>
                    {
                        panes.Clear();
                        panes.Add().CustomTools(tb =>
                        {
                            tb.Add().Buttons(btns =>
                            {
                                btns.AddButton(Html.Global("RES_PREVIEW"), "previewCss();").ImageIcons(Url.Content("~/content/images/icon_search_page_16.png"));
                                btns.AddSpliter();
                                btns.AddLabel(Html.Global("RES_CSS_STYLESHEET") + ":");
                                btns.AddButton(Html.Global("RES_LOAD"), "loadCss();");
                            });
                        });
                    })
                    .AllowHTMLEditing(false)
                    .Height(550)
                    .Render();
          });
      }).Render();
      
    <div style="margin-top: 10px; padding: 20px 0px;">
        <table>
            <tr>
                <td>
                    @if (WebSiteContext.Current.IsAuthorized<DNA.Mvc.Controllers.ThemeController>("SaveAs"))
                    {
                        @(Ajax.Dna().ComboBox("SaveOption")
                .Width(200)
                .Items(items =>
                {
                    items.AddValue(Html.Global("Design_SaveStyleInPage"), "0");
                    items.AddValue(Html.Global("Design_AppendToDefaultCss"), "1");
                    items.AddValue(Html.Global("Design_OverwriteDefaultCss"), "2");
                    items.AddValue(Html.Global("Design_SaveToNewCss"), "3");
                })
                .Select("0")
                .GetHtml()
                )
                    }
                    else
                    { 
                        <input type="hidden" value="0" name="SaveOption" />
                    }
                </td>
                <td>
                    @Ajax.Dna().Button().ImageIcons(Url.Content("~/content/images/icon_save.gif")).LocText("RES_SAVE").Submit().GetHtml()
                </td>
                @if (WebSiteContext.Current.IsAuthorized<DNA.Mvc.Controllers.ThemeController>("SaveAs"))
                {
                    <td>@Ajax.Dna().Button("btnSaveAs").LocText("RES_EXPORT").Click("location=\"" + Url.Action("SaveAs", "Theme") + "\";").ImageIcons(Url.Content("~/content/images/icon_download_16.gif")).GetHtml()
                    </td>
                }
            </tr>
        </table>
    </div>
}
<script type="text/javascript">
    function loadCss(){
       $.ajax({ url:"@(Url.Content("~/content/themes/" + WebSiteContext.Current.Web.Theme + "/dna.ui.css"))",success:function(txt){
            $("#Web_CssText").val(txt);
       }});
    }
    
    function $design(_type,_basePath){
       _showUIDesigner(_type,_basePath);
    }

    function _showUIDesigner(_type,_basePath) {
        var _dlg = $("<div/>").appendTo("body"),_bp="backgrounds";
        if (_basePath) _bp=_basePath;

        _dlg.dialog({
            title: "@Html.Global("RES_UIDESIGNER")",
            dialogClass: "d-dialog",
            resizable: false,
            width: 570,
            height: 620,
            close: function () { _dlg.remove(); },
            open:function(){
               $.post("@Url.Action("UIDesigner", "Theme", new { Area = "" })",{name:_type,basePath:_bp},function(data){  _dlg.html(data);  });
            },
            buttons:{
                "@Html.Global("RES_OK")":function(){
                    applyElementStyle($("#currentDesignElement").val());
                    $(this).dialog("close");
                },
                "@Html.Global("RES_CANCEL")":function(){$(this).dialog("close");}
            }
        });
    }

    function _getElement(_name){
    if (_name=="body")
    return $(document.getElementById("fPreview").contentDocument.body);
    else
      return $(_name,$(document.getElementById("fPreview").contentDocument.body));
    }
    
    function clearBG(_name) {
      _getElement(_name).css({
            "background": "none"
        });
    }
    function setBGImage(_name, _url) {
        _getElement(_name).css({
            "background-image": "url(" + _url + ")"
        });
    }

    function setRepeat(_name, _value) {
        _getElement(_name).css({
            "background-repeat": _value
        });
    }

    function setColor(_name, _color) {
        _getElement(_name).css({ "color": _color });
    }

    function setBGColor(_name, _color) {
        _getElement(_name).css({
            "background-color": _color
        });
    }

    function setOpacity(_name, _opacity) {
        _getElement(_name).css({
            "opacity": _opacity / 100,
            "filter": "Alpha(Opacity=" + _opacity + ");"
        });
    }

    function setFontSize(_name, _size) {
        _getElement(_name).css({
            "font-size": _size + "pt"
        });
    }

    function setFontWeight(_name, _fontWeight) {
        _getElement(_name).css({
            "font-weight": _fontWeight
        });
    }

    function setFamily(_name, _family) {
        _getElement(_name).css({
            "font-family": _family
        });
    }

    function setTextAlign(_name, _textalign) {
        _getElement(_name).css({
            "text-align": _textalign
        });
    }

    function setBorderStyle(_name,_type,_style){
        var attrName="border-"+(_type ? (_type+"-"):"")+"style",
         el=_getElement(_name),_cs={};
         _cs[attrName]=_style;
        el.css(_cs);
    }

    function setBorderSize(_name,_type,_size){
            var attrName="border-"+(_type ? (_type+"-"):"")+"width",
         el=_getElement(_name),_cs={};
         _cs[attrName]=_size;
        el.css(_cs);
    }

    function setBorderColor(_name,_type,_color){
            var attrName="border-"+(_type ? (_type+"-"):"")+"color",
         el=_getElement(_name),_cs={};
         _cs[attrName]=_color;
        el.css(_cs);
    }

    function setPadding(_name,_type,_padding){
            var attrName="padding-"+_type,
         el=_getElement(_name),_cs={};
         _cs[attrName]=_padding;
        el.css(_cs);
    }
    
    function setMargin(_name,_type,_margin){
            var attrName="margin-"+_type
         el=_getElement(_name),_cs={};
         _cs[attrName]=_margin;
        el.css(_cs);
    }

    function css3SetResize(_name,_type){
     _getElement(_name).css({
            "resize": _type
        });
    }
    
    function setBoxShaow(_name,_hoffset,_voffset,_blur,_color){
    var _val=_hoffset+"px "+_voffset+"px "+_blur+"px "+_color;
        _getElement(_name).css({
            "-moz-box-shadow": _val,
            "-webkit-box-shadow":_val,
            "box-shadow":_val
        });
    }
   
   function setTextShaow(_name,_hoffset,_voffset,_blur,_color){
    var _val=_hoffset+"px "+_voffset+"px "+_blur+"px "+_color;
        _getElement(_name).css({
            "text-shadow": _val
        });
    }

    function setCorner(_name,_type,_value){
         var el=_getElement(_name),_val=_value+"px";
         if (_type==0) { //all
             el.css({
              "-moz-border-radius": _val,
              "-webkit-border-radius": _val,
              "border-radius":  _val
             });
         }
        
        if (_type==1) { //Top
             el.css({
               "-moz-border-radius-topleft": _val,
               "-webkit-border-top-left-radius":_val,
               "border-top-left-radius": _val,
               "-moz-border-radius-topright": _val,
               "-webkit-border-top-right-radius":_val,
               "border-top-right-radius":_val
             });
        }

        if (_type==2){ // bottom
           el.css({
             "-moz-border-radius-bottomleft":  _val,
             "-webkit-border-bottom-left-radius":  _val,
             "border-bottom-left-radius":  _val, 
             "-moz-border-radius-bottomright":  _val, 
             "-webkit-border-bottom-right-radius":  _val, 
             "border-bottom-right-radius":  _val
           });
        }

        if (_type==3){ //Top left
          el.css({
          "-moz-border-radius-topleft":  _val,
          "-webkit-border-top-left-radius":  _val,
          "border-top-left-radius":  _val
          });
        }

       if (_type==4){ //Top right
          el.css({
          "-moz-border-radius-topright":  _val,
          "-webkit-border-top-right-radius":  _val,
          "border-top-right-radius: 6px":  _val
          });
        }

       if (_type==5){ //Bottom left
          el.css({
          "-moz-border-radius-bottomleft":  _val,
          "-webkit-border-bottom-left-radius":  _val,
          "border-bottom-left-radius":  _val
          });
        }

       if (_type==6){ //Bottom right
          el.css({
          "-moz-border-radius-bottomright":  _val,
          "-webkit-border-bottom-right-radius":  _val,
          "border-bottom-right-radius: 6px":  _val
          });
        }

       if (_type==7){ //Left
          el.css({
          "-moz-border-radius-topleft":  _val,
          "-webkit-border-top-left-radius":  _val,
          "border-top-left-radius":  _val,
          "-moz-border-radius-bottomleft":  _val,
          "-webkit-border-bottom-left-radius":  _val,
          "border-bottom-left-radius":  _val
          });
        }
       
       if (_type==8){ //Right
          el.css({
          "-moz-border-radius-topright":  _val,
          "-webkit-border-top-right-radius":  _val,
          "border-top-right-radius":  _val,
          "-moz-border-radius-bottomright":  _val,
          "-webkit-border-bottom-right-radius":  _val,
          "border-bottom-right-radius":  _val
          });
        }

    }

    function previewCss() {
        var csstxt = $("#Web_CssText").val();
        var themePath="@Url.Content("~/content/themes/" + WebSiteContext.Current.Web.Theme + "/")";

        csstxt = csstxt.replace(/url\(([""])(.+?)\1\)/g, "url('"+themePath+"$2')");
        //csstxt = csstxt.replace(/url\(([^"])(.+?)\1\)/g, "url('"+themePath+"$2')");

        var _style = $("head style[id='customstyle']",$(document.getElementById("fPreview").contentDocument));
        if (_style.length)
            _style.remove();
        _style = $("<style id='customstyle' type='text/css'/>").appendTo($("head",$(document.getElementById("fPreview").contentDocument)));
        _style.html(csstxt);
        $("#designerTab").tabs("select",0);
    }

    function applyElementStyle(_elementName) {
        var _regex = _elementName + "\\{(.|\n|\r)+?\\}", startChar = _elementName.substring(0, 1);
        if (_elementName) {
            var _currentElement =_getElement(_elementName); // $(_elementName);

            if (startChar == "." || startChar == "#")
                _regex = "\\" + _regex;
            var _curVal = _currentElement[0].style.cssText, _cssVal = $("#Web_CssText").val();
            if (_curVal) {
                if (_cssVal) {
                    var _regexp = new RegExp(_regex);
                    if (_regexp.test(_cssVal)) {
                        $("#Web_CssText").val(_cssVal.replace(_regexp, _elementName + "{" + _curVal + "}"));
                    }
                    else {
                        $("#Web_CssText").val(_cssVal + "\t\n" + _elementName + "{" + _curVal + "}");
                    }
                } else {
                    $("#Web_CssText").val(_elementName + "{" + _curVal + "}");
                }
            }
        }
    }
</script>
